<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-11-05 14:04:13
 * @LastEditors: william
 * @LastEditTime: 2025-11-10 16:14:53
-->
<template>
  <view
    class="voiceControlIcon-dialog"
    :style="{
      bottom: bottom + 'px'
    }"
    @click="handleOpen"
  >
    <image
      :src="getViteImageUrl('system/voiceRecognize.png')"
      mode="aspectFit"
      class="voice-icon"
    />
  </view>
  <VoiceControlIndex 
    @confirm="handleConfirm" 
    :type="type" 
    :analysis-source="analysisSource" 
    v-if="voiceControlVisible" v-model="voiceControlVisible" />
</template>

<script setup>
import VoiceControlIndex from './index'

defineOptions({
  name: 'VoiceControlIcon',
  inheritAttrs: false
})

const props = defineProps({
  type: {
    type: String,
    default: 'default',
    vaidator: val => ['default', 'manual'].includes(val)
  },
  check: {
    type: Function,
    default: () => {},
    vaidator: val => typeof val === 'function'
  },
  analysisSource: {
    type: Object,
    default: () => ({})
  }
})

const bottom = ref('')
// 弹框参数
const voiceControlVisible = ref(false)

onMounted(_ => {
  bottom.value =
    g_utils.getPageNum(false, true).tabbarHeight + g_utils.rpxToPx(45)
})

const handleOpen = _ => {
  if (props.check && !props.check()) {
    g_utils.showToast('请先开始')
    return
  }
  voiceControlVisible.value = true
}

const emit = defineEmits(['confirm'])

const handleConfirm = data => {
  emit('confirm', data)
}
</script>

<style lang="scss" scoped>
.voiceControlIcon-dialog {
  position: fixed;
  right: 40rpx;
  bottom: 0;
  z-index: 98;
  width: 82rpx;
  height: 82rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1rpx solid #d7dbec;
  background-color: #f7f7f7;
  border-radius: 50%;
  .voice-icon {
    width: 37rpx;
    height: 55rpx;
  }
}
</style>
